<template>
  <div class="subaccount">
    <Header />
    <!-- <transition name="fade">
      <small v-if="!subAddress" class="header-next clearfix">{{$t('subaccount.set_address')}}
        <span class="pointer p-span" @click="openDialog('setAddress',{
                      puid: subCuid,
                      coin_type: subCoinType,
                      config_id: subId,
                    })">{{$t('subaccount.set')}}</span>
      </small>
    </transition> -->
    <div class="w">
      <Breadcrumb :breadcrumbs="breadcrumbs" />
      <section v-loading="loading">
        <button @click="openDialog('createSubAccount')" class="create">{{$t('subaccount.create')}}</button>
        <div v-for="(account_v,account_k) in subAccount" :key="account_k" class="table-item">
          <div class="account_header clearfix">
            <span class="name fl">{{account_v.name}}</span>
            <button class="add fr" @click="openDialog('addCoinType',{
              puid: account_v.puid,
              name: account_v.name
            })">{{$t('subaccount.add_cointype')}}</button>
          </div>
          <table>
            <thead>
              <tr>
                <th>{{$t('subaccount.currency')}}</th>
                <th>{{$t('dcrSearch.netIncome')}}</th>
                <th>{{$t('dashboard.earn')}}</th>
                <th>{{$t('subaccount.settlement')}}</th>
                <th>{{$t('dashboard.real_force')}}</th>
                <th>{{$t('dashboard.workers_active')}}</th>
                <th width="220px">{{$t('wallet.address.operation')}}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(coin_v,coin_k) in account_v.sub_config" :key="coin_k">
                <td>
                  <div class="coin_type">
                    <el-tooltip v-if="!coin_v.address" :content="$t('subaccount.btc_no_address1') + coin_v.coin_type.toUpperCase() + $t('subaccount.btc_no_address2')" placement="bottom">
                      <i @click="openDialog('setAddress',{
                      puid: account_v.puid,
                      coin_type: coin_v.coin_type,
                      config_id: coin_v.id,
                      })" class="no-address iconfont icon-gantanhao"></i>
                    </el-tooltip>
                    <span  @click="changeSubAccount({
                      puid: account_v.puid,
                      name: account_v.name,
                      coin_type: coin_v.coin_type,
                      address: coin_v.address,
                      id: coin_v.id,
                      balance_type: coin_v.balance_type
                    })" class="name">{{coin_v.coin_type.toUpperCase()}}</span>
                  </div>
                </td>
                <td>{{coin_v.profit}}</td>
                <td>{{coin_v.earn}}</td>
                <td>{{coin_v.balance_type}}</td>
                <td>{{coin_v.shares_15m}} {{coin_v.shares_15m_unit}}{{getCoinHashUnit(coin_v.coin_type)}}/s</td>
                <td>{{coin_v.worker_active}}</td>
                <td>
                  <span class="pointer">{{$t('router.set')}}
                  </span>
                  <ul hidden>
                    <li v-if="coin_v.address" @click="openDialog('modifyAddress',{
                      puid: account_v.puid,
                      coin_type: coin_v.coin_type,
                      config_id: coin_v.id,
                      address: coin_v.address,
                    })">{{$t('subaccount.update_wallet')}}</li>
                    <li v-else @click="openDialog('setAddress',{
                      puid: account_v.puid,
                      coin_type: coin_v.coin_type,
                      config_id: coin_v.id,
                    })">{{$t('subaccount.set_wallet')}}</li>
                    <li @click="openDialog('setObAccess',{
                      puid: account_v.puid,
                      coin_type: coin_v.coin_type,
                      config_id: coin_v.id
                    })">{{$t('subaccount.set_observer')}}</li>
                    <li @click="openDialog('setWarning', {
                      puid: account_v.puid,
                      coin_type: coin_v.coin_type,
                      config_id: coin_v.id
                    })">{{$t('subaccount.force_warining')}}</li>
                    <li @click="openDialog('setBalanceType', {
                      puid: account_v.puid,
                      balance_type:coin_v.balance_type,
                      coin_type: coin_v.coin_type,
                      config_id: coin_v.id
                    })">{{$t('subaccount.set_settlement')}}</li>
                  </ul>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
    </div>
    <Footer />
    <el-dialog :visible.sync="showDialog">
      <component v-if="showDialog" ref="dialog" :is="dialogType" :data="dialogParms" class="dialog-box" @toggleDialog="changeShowDialog" />
    </el-dialog>
  </div>
</template>

<script>
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import Breadcrumb from '@/components/Breadcrumb';
import { mapGetters, mapMutations } from 'vuex';
import { accountList } from '@/api';
import createSubAccount from './dialog/createSubAccount';
import setAddress from './dialog/setAddress';
import modifyAddress from './dialog/modifyAddress';
import addCoinType from './dialog/addCoinType';
import setBalanceType from './dialog/setBalanceType';
import setWarning from './dialog/setWarning';
import setObAccess from './dialog/setObAccess';

export default {
  name: 'SubAccount',
  components: {
    Header,
    Footer,
    Breadcrumb,
    createSubAccount,
    setAddress,
    modifyAddress,
    addCoinType,
    setBalanceType,
    setWarning,
    setObAccess,
  },
  data() {
    return {
      loading: true,
      breadcrumbs: [
        {
          path: '/',
          titleKey: 'router.home',
        },
        {
          path: '/subaccount',
          titleKey: 'invite.subaccount',
        },
      ],
      showDialog: false,
      dialogType: '',
      subAccount: [],
      dialogParms: {},
    };
  },
  computed: {
    ...mapGetters(['subCuid', 'subAddress', 'subCoinType', 'subId']),
  },
  created() {
    this.breadcrumbs[1].path = this.$route.fullPath;
    if (!this.subCuid || this.$route.query.type === 'createsubaccount') {
      this.openDialog('createSubAccount');
    }
    this.getAccountList();
  },
  methods: {
    ...mapMutations([
      'SET_SUB_CUID',
      'SET_SUB_NAME',
      'SET_SUB_COIN_TYPE',
      'SET_SUB_ID',
      'SET_SUB_ADDRESS',
      'SET_SUB_BALANCE_TYPE',
    ]),
    getCoinHashUnit(coinType) {
      return coinType === 'zec' ? 'sol' : 'H';
    },
    coinTypeScale(coinType) {
      if (coinType === 'eth') {
        return 10 ** 9;
      }
      return 10 ** 8;
    },
    changeSubAccount(obj) {
      this.SET_SUB_CUID(obj.puid);
      this.SET_SUB_NAME(obj.name);
      this.SET_SUB_COIN_TYPE(obj.coin_type);
      this.SET_SUB_ID(obj.id);
      this.SET_SUB_ADDRESS(obj.address);
      this.SET_SUB_BALANCE_TYPE(obj.balance_type);
      this.$router.push('/pools/dashboard');
    },
    getAccountList() {
      this.loading = true;
      accountList()
        .then((res) => {
          if (res.data.status === 1) {
            this.subAccount = res.data.data.map((v) => {
              const obj = JSON.parse(JSON.stringify(v));
              obj.sub_config = v.sub_config.map((coinV) => {
                const obj2 = JSON.parse(JSON.stringify(coinV));
                obj2.earn = (coinV.earn / this.coinTypeScale(coinV.coin_type)).toFixed(8);
                return obj2;
              });
              return obj;
            });
            if (
              this.subAccount.length &&
              this.$route.query.type === 'setwarning'
            ) {
              this.openDialog('setWarning', {
                puid: this.subCuid,
                coin_type: this.subCoinType,
                config_id: this.subId,
              });
            }
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    changeShowDialog(obj) {
      this.showDialog = obj.showDialog;
      if (obj.refresh) {
        this.getAccountList();
      }
    },
    openDialog(name, dialogParms) {
      this.dialogType = name;
      this.showDialog = true;
      this.dialogParms = dialogParms;
    },
  },
  watch: {
    $route(v) {
      this.breadcrumbs[1].path = this.$route.fullPath;
      if (v.query.type && v.query.type === 'createsubaccount') {
        this.openDialog('createSubAccount');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// small.header-next {
//   background-color: rgba(0, 0, 0, 0.7);
//   height: 30px;
//   line-height: 30px;
//   color: #f3ffbd;
//   display: block;
//   font-size: 12px;
//   text-align: center;
//   &.fade-enter-active,
//   .fade-leave-active {
//     transition: all 0.5s;
//   }
//   &.fade-enter,
//   &.fade-leave-to {
//     opacity: 0;
//     height: 0;
//   }
//   .p-span {
//     color: #247ba0;
//   }
//   .icon {
//     font-weight: bold;
//     margin-right: 10px;
//   }
// }
.w {
  min-height: 400px;
  padding-bottom: 20px;
}
section {
  position: relative;
  button.create {
    min-width: 90px;
    height: 30px;
    line-height: 30px;
    background-color: #70c1b3;
    border-radius: 3px;
    border: none;
    outline: none;
    font-size: 12px;
    color: #fff;
    position: absolute;
    top: -50px;
    right: 20px;
    &:hover {
      background-color: #8dcdc2;
    }
  }
  .table-item {
    background-color: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    border: solid 1px #e0e0e0;
    margin-top: 20px;
    // overflow: hidden;
    &:first-of-type {
      margin-top: 0;
    }
    .account_header {
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      height: 50px;
      padding: 10px 15px 10px 20px;
      background-color: #f9f9f9;
      box-shadow: inset 0px -1px 0px 0px #f2f2f2;
      line-height: 30px;
      .name {
        font-size: 12px;
        color: #333333;
      }
      .add {
        min-width: 90px;
        height: 30px;
        background-color: #ffffff;
        border-radius: 3px;
        border: solid 1px #cccccc;
        outline: none;
        color: #333333;
        font-size: 12px;
        &:hover {
          background-color: #f4f4f4;
        }
      }
    }
    table {
      width: 100%;
      thead {
        border-bottom: 1px solid #f2f2f2;
        background-color: transparent;
        tr {
          th {
            border: none;
            color: #ccc;
            text-align: center;
            height: 30px;
            font-size: 12px;
            cursor: pointer;
          }
        }
      }
      tbody {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        tr {
          border-bottom: 1px solid #f2f2f2;
          &:last-of-type {
            border: none;
          }
          td {
            height: 60px;
            &:first-of-type {
              .coin_type{
                position: relative;
                .name{
                  cursor: pointer;
                  &:hover {
                    color: #70c1b3;
                  }
                }
                .no-address{
                  cursor: pointer;
                  position: absolute;
                  left: 4px;
                  color: #f7cc86;
                }
              }
            }
          }
          &:hover {
            background-color: #f9f9f9;
          }
        }
      }
      tr {
        th,
        td {
          white-space: nowrap;
          text-align: center;
          border: none;
          &:first-of-type {
            border-left: none;
          }
        }
        th {
          height: 50px;
          color: #333;
          font-weight: normal;
          font-size: 14px;
        }
        td {
          height: 40px;
          color: #999;
          font-size: 12px;
          > .pointer {
            color: #247ba0;
          }
          &:hover {
            position: relative;
            ul {
              display: block;
              position: absolute;
              left: 50%;
              top: 45px;
              background-color: rgba(0, 0, 0, 0.7);
              padding: 7px 0;
              border-radius: 5px;
              transform: translateX(-50%);
              z-index: 99;
              &::before {
                content: " ";
                border: 4px solid transparent;
                border-bottom-color: rgba(0, 0, 0, 0.7);
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: -8px;
              }
              li {
                min-width: 140px;
                padding: 0 6px;
                line-height: 40px;
                font-size: 14px;
                color: #70c1b3;
                cursor: pointer;
                &:hover {
                  color: #f3ffbd;
                }
              }
            }
          }
        }
      }
    }
  }
}
.subaccount /deep/ {
  .el-dialog__wrapper {
    text-align: center;
    .el-dialog {
      display: inline-block;
      width: auto;
      text-align: left;
      .el-dialog__header {
        padding: 0;
      }
      .el-dialog__body {
        padding: 0;
      }
    }
  }
  .dialog-box {
    .title {
      font-size: 24px;
      color: #70c1b3;
      line-height: 36px;
    }
    .dialog-footer {
      margin-bottom: 30px;
      .el-button {
        width: 100%;
        margin: 0 0 10px;
        font-size: 16px;
        border: none;
        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }
    small.info {
      color: #70c1b3;
    }
    .mb0 {
      margin-bottom: 0;
    }
    input {
      width: 100%;
      border: none;
      outline: none;
      border-bottom: 1px solid #e4e4e4;
      padding: 10px 5px;
      margin-bottom: 10px;
      border-radius: 0;
      &::-webkit-input-placeholder {
        color: #ccc;
      }
      &:-moz-placeholder {
        color: #ccc;
      }
      &::-moz-placeholder {
        color: #ccc;
      }
      &:-ms-input-placeholder {
        color: #ccc;
      }
    }
    .width270 {
      width: 270px;
    }
    &.dialog1 {
      width: 330px;
      padding: 0 30px;
      .title {
        padding: 24px 0 15px;
      }
      .info {
        line-height: 24px;
      }
      .bt-group {
        .button {
          padding: 6px 0;
          display: inline-block;
          width: 60px;
          height: 26px;
          border-radius: 3px;
          border: solid 1px #cccccc;
          font-size: 12px;
          line-height: 14px;
          text-align: center;
          &:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3),&:nth-of-type(4){
            margin-top: 0;
          }
          &:nth-of-type(4n+1){
            margin-left: 0;
          }
          margin-left: 10px;
          margin-top: 15px;
          .icon {
            vertical-align: top;
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-right: 4px;
            @each $coinType in btc,bch,eth,dcr,etp,bsv,zec {
              &.icon-#{$coinType} {
                background: url(../../assets/images/home/icon-#{$coinType}.png) no-repeat center center/auto 100%;
              }
            }
          }
          &:hover,
          &.active {
            background-color: #f4f4f4;
          }
        }
      }
      .dialog-footer {
        .btn {
          width: 100%;
          height: 40px;
          border-radius: 20px;
          border: solid 1px #70c1b3;
          color: #70c1b3;
          font-size: 16px;
          outline: none;
        }
      }
    }
  }
}
</style>
